<template>
	<view class="app"  >
		<image class="bg-set" src="/static/ui1.0/home_bg.jpeg" mode="widthFix"></image>
		<!-- 顶部栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<!-- <page-header :showFillView="false"></page-header> -->
		<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			:top="headerHeight" 
			@down="downCallback" 
			:up="upOption" 
			@up="loadAllData" 
		>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <page-header :showFillView="true"></page-header> -->
		<!-- #endif -->
			<!-- 头部轮播图 -->
			<banner :list="carousel"></banner>
			<!-- 分类 -->
			<!-- <view class="cate-section">
				<view class="item" v-for="item in navList" :key="item._id" @click="navTo(item.link)">
					<image class="icon" :src="item.icon"></image>
					<text>{{ item.name }}</text>
				</view>
			</view> -->
			<view class="cate-section">
				<view class="item" @click="goGameTab(1)">
					<image class="icon" src="/static/ui1.0/1.png"></image>
					<text>积分赛</text>
				</view>
				<view class="item" @click="goGameTab(2)">
					<image class="icon" src="/static/ui1.0/2.png"></image>
					<text>抢票赛</text>
				</view>
				<view class="item" @click="goGameTab(3)">
					<image class="icon" src="/static/ui1.0/3.png"></image>
					<!-- <text>钓鱼秘籍</text> -->
					<text>掘金赛</text>
				</view>
				<view class="item" @click="">
					<image class="icon" src="/static/ui1.0/4.png"></image>
					<text>赚取积分</text>
				</view>
			</view>
			
			<!-- 最新赛事 -->
			<view class="new-game" :class="{show: loaded}">
				<view class="floor-header row" @click="goTabbar('/pages/tabbar/game')">
					<!-- <view class="column fill">
						<text class="tit">最新赛事</text>
					</view>
					更多<text class="mix-icon icon-you"></text> -->
					<image class="icon" src="/static/ui1.0/6.png" mode="aspectFit"></image>
				</view>
				<game-list ref="gameList" :list="gameList"></game-list>
			</view>
			<view class="ranking" :class="{show: loaded}">
				<view class="floor-header row" @click="goTabbar('/pages/ranking/list')">
					<view class="column fill">
						<!-- <text class="tit">天梯榜</text> -->
						<image class="icon" src="/static/ui1.0/7.png" mode="aspectFit" ></image>
					</view>
					<!-- 更多<text class="mix-icon icon-you"></text> -->
					<!-- <image class="icon" src="/static/ui1.0/1080×214.png" mode="aspectFit"></image> -->
					<!-- <image class="icon" src="/static/ui1.0/1080×214.png" mode="aspectFit"></image> -->
				</view>
				<!-- <image class="icon" src="/static/ui1.0/1080×214.png" mode="aspectFit"></image> -->
				<ranking-list ref="rankingList" :list="rankingList" :top3Players="top3PlayersSource"></ranking-list>
			</view>
			
		<!-- #ifndef MP-WEIXIN -->
		</mescroll-body>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <mix-load-more :status="loadingType"></mix-load-more> -->
		<!-- #endif -->
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	// import tabbarMixin from './mixin/tabbar' 
	import homeMixin from './mixin/home'
	import pageHeader from './components/page-header.vue'
	import banner from './components/banner.vue'
	import gameList from './components/game-list.vue'
	import rankingList from '@/pages/game/components/ranking-list.vue'
	
	export default {
		components: {
			pageHeader,
			banner,
			gameList,
			rankingList,
		},
		mixins: [homeMixin],//, tabbarMixin
		data() {
			return {
				// navList: [],//导航列表
				upOption:{
					auto: false, // 不自动加载
					page: {
					 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					 	size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				advertList: [],//广告列表
				hotList: [],//热门推荐
				gameList: [],
				rankingList: [],
				top3PlayersSource: [],
				invitationCode: '',
			}
		},
		computed: {
			...mapState(['userInfo']), 
			midAdvert(){
				if(this.advertList.length === 0) return {};
				const res = this.advertList.filter(item=> item.advert_type === 'middle');
				return res.length > 0 ? res[0]: {};
			},
			carousel(){
				// return this.advertList.filter(item=> item.advert_type === 'carousel');
				return this.advertList;
			}
		},
		onLoad(options) {
			this.invitationCode = options.invitationCode || '';
			if(this.invitationCode != ''){
				uni.setStorageSync('invitationCode', this.invitationCode);
			}
		},
		onShow() {
			// this.$store.dispatch('getPlayer');
			this.loadData();
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
			return {
				title: '掐鱼',
				path: 'pages/tabbar/home?invitationCode='+this.userInfo.invitationCode,
				imageUrl: ''
			}
		},
		// #endif
		methods: {
			//加载广告 缓存10分钟
			async loadData(){
				let that = this;
				// util.request(api.IndexUrl).then(function(res) {
				// 	// that.log("======"+JSON.stringify(res.data.categories));
				// 	if (res.errno == 0) {
				// 		that.advertList = res.data.advertiseList;
				// 		that.navList = res.data.categories;
				// 	}
				// });
				const res = await this.$request('home', "IndexUrl", {});
				if (res.errno == 0) {
					that.advertList = res.data.advertiseList;
					// that.navList = res.data.categories;
					that.gameList = res.data.gameList;
					var rankingList = res.data.rankingList;
					that.top3PlayersSource = rankingList.slice(0, 3)
					that.rankingList = rankingList.slice(3, rankingList.length);
				}
				// this.log("======"+JSON.stringify(res.data));
				
				// this.loadWxCode();
				// this.mescroll.endSuccess(that.rankingList.size); //结束加载状态
			},
			goTabbar(uri){
				uni.switchTab({
					url: uri
				})
			},
			goGameTab(tab){
				this.$store.commit('setStateAttr', {
					key: 'gameTab',
					val: tab
				});
				console.log("state==="+JSON.stringify(this.$store.state))
				uni.switchTab({
					url: '/pages/tabbar/game'
				})
			},
			
			async loadWxCode(){
				const res = await this.$post('home', "WxWxcode", {scene:'invitationCode='+this.userInfo.invitationCode, page:'pages/tabbar/home'});
				// this.log("======"+JSON.stringify(res));
				// this.wxcode = res.message;
			},
		}
	}
</script>

<style>
	page{
		/* background-color: #f7f7f7; */
		
	}
</style>
<style scoped lang="scss">
	.bg-set{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		
	}
	/* 分类 */
	.cate-section {
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		align-items: center;
		flex-wrap:wrap;
		padding: 10rpx 16rpx; 
		margin: 30rpx 30rpx 0rpx 30rpx;
		background: #fff;
		
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 20%;
			padding: 20rpx 0;
			font-size: 26rpx;
			color: #333;
			flex: 1;
		}
		.icon {
			width: 80rpx;
			height: 85rpx;
			// width: 130rpx;
			// height: 150rpx;
			margin-bottom: 14rpx;
			// border-radius: 20%;
		}
	}
	.mid-ad{
		width: 100%;
		height: 208rpx;
		padding: 0 20rpx 20rpx;
		background: #fff;
		
		image{
			width:100%;
			height: 100%; 
		}
	}
	
	.new-game{
		// padding-top: 20rpx;
		background: linear-gradient(to bottom, #fff 10rpx, #f7f7f7);
		opacity: 0;
		transition: opacity .2s;
		margin: 0rpx 30rpx 0rpx 30rpx;
		border-radius: 0 0 30rpx 30rpx;
		padding-bottom: 80rpx;
		
		.icon{
			width: 90%;
			margin-left: 5%;
			height: 200rpx;
		}
		&.show{
			opacity: 1;
		}
		.floor-header{
			padding-bottom: 30rpx;
		}
		/deep/ .list-item{
			box-shadow: 4rpx 0 10rpx rgba(0,0,0,.06);
		}
	}
	.ranking{
		padding-top: 20rpx;
		// background: linear-gradient(to bottom, #fff 10rpx, #f7f7f7);
		opacity: 0;
		transition: opacity .2s;
		margin: 0rpx 30rpx 0rpx 30rpx;
		border-radius: 0 0 20rpx 20rpx;
		// margin: 20rpx;
		&.show{
			opacity: 1;
		}
		.floor-header{
			padding-bottom: 30rpx;
			.icon{
				width: 100%;
				height: 203rpx;
				margin-top: -70rpx;
			}
		}
		/deep/ .list-item{
			box-shadow: 4rpx 0 10rpx rgba(0,0,0,.06);
		}
	}
	
</style>
